<template>
  <div class="project-setting project-status-setting">
    <div class="setting-header">
      <div class="setting-title">
        {{$t('projectManage.setting.flowSetting.title')}}
      </div>
      <div class="setting-action">
        <el-button type="primary" @click="addAction"><i class="el-icon-plus"></i> {{$t('projectManage.setting.flowSetting.createFlow')}}</el-button>
      </div>
    </div>
    <div class="setting-content" v-loading="loading">
      <BaseListForNoData v-show="!loading && !tableData.length" :notice-msg="$t('common.base.tip.noData')"></BaseListForNoData>
      <template v-if="tableData.length">

        <el-table
          v-table-style
          :data="tableData"
          border
          header-row-class-name="common-list-table-header__v2"
          >
          <el-table-column
            v-for="(column, index) in columns"
            :key="`${column.displayName}_${index}`"
            :prop="column.fieldName"
            :label="column.displayName"
            :min-width="column.minWidth || '108px'"
            show-overflow-tooltip
          >
          <template slot-scope="scope">
            <template v-if="column.fieldName === 'sourceStatusName'">
              <div class="status-color">
                <span :style="{backgroundColor: scope.row.sourceStatusColor || '#F6C659'}">{{ scope.row.sourceStatusName }}</span> 
              </div> 
            </template>
            <template v-else-if="column.fieldName === 'targetStatusName'">
              <div class="status-color">
                <span :style="{backgroundColor: scope.row.targetStatusColor || '#F6C659'}">{{ scope.row.targetStatusName }}</span> 
              </div> 
            </template>
          <template v-else>
            {{ $formatFormField(column, scope.row) }}
          </template>
          </template>
          </el-table-column>
          <el-table-column fixed="right" width="100" :label="$t('common.base.table.col.operator')">
            <template slot-scope="scope">
              <el-button 
                @click="editRow(scope.row)" 
                type="text"
              >
              {{$t('common.base.edit')}}
              </el-button>
              <el-button
                type="text"
                size="small"
                class="danger-btn"
                @click="deleteRow(scope.row)"
              >
              {{$t('common.base.delete')}}
              </el-button>
            </template>
          </el-table-column>
          </el-table>
      </template>
    </div>
    <!-- 新建状态弹窗 -->
    <create-flow ref="CreateFlowModal" :template-id="templateId" @submitForm="submitForm"></create-flow>
  </div>
</template>
<script>
import NoDataView from '@src/component/common/NoDataViewNew';
import CreateFlow from '@src/modules/setting/projectManage/components/WorkflowSettings/components/CreateFlow.vue'
import draggable from 'vuedraggable'
import _,{ cloneDeep }  from 'lodash';
import * as ProjectManage from '@src/api/ProjectManage.ts';

export default {
  name: 'workflow-settings',
  data() {
    return  {
      tableData: [],
      loading: false,
      statusList: [],
      taskRuleList: [],
    }
  },
  components: {
    NoDataView,
    draggable,
    CreateFlow
  },
  props: {
    templateId: {
      type: String | Number,
      default: '',
    },
  },
  // 页面初始化
  mounted() {
    this.getFlowData() // 获取列表
  },
  computed: {
    columns() {
      let columns = [
        {
          displayName: this.$t('projectManage.setting.flowSetting.conversionName'),
          fieldName: 'convertName',
          setting: {
            originalFormType: 'text',
          },
        },
        {
          displayName: this.$t('projectManage.setting.flowSetting.startState'),
          fieldName: 'sourceStatusName',
          setting: {
            originalFormType: 'text',
          },
          minWidth: '240px',
        },
        {
          displayName: this.$t('projectManage.setting.flowSetting.moveRule'),
          fieldName: 'ruleName',
          setting: {
            originalFormType: 'text',
          },
          minWidth: '240px',
        },
        {
          displayName: this.$t('projectManage.setting.flowSetting.targetState'),
          fieldName: 'targetStatusName',
          setting: {
            originalFormType: 'text',
          },
          minWidth: '240px',
        },
      ];
      return columns;
    },
  },
  methods: {
    getFlowData() {
      this.loading = true
      ProjectManage.processList({projectTypeId: this.templateId}).then((res) => {
        this.loading = false
        if (!res.success) return this.$message.error(res.message)
        this.tableData = res.data || []
      })
    },
    // 添加项目状态
    addAction() {
      this.$refs.CreateFlowModal.openDialog()
    },

    onMove(e) {
      let index = e.relatedContext.index
      if (index === 0 || index === (this.tableData.length - 1)) {
        return false
      }
      return true
    },

    submitForm(form, isEdit) {
      let params = {
          ...form,
          projectTypeId: this.templateId,
      }
      if (isEdit) {
        ProjectManage.processUpdate(params).then((res) => {
          if(res.success) {
            this.$message.success(this.$t('common.base.tip.edit2Success'));
            this.$refs.CreateFlowModal.closeDialog()
            this.getFlowData()
          } else {
            this.$message.error(res.message || this.$t('common.base.tip.editFail'));
          }
        })
      } else {
        ProjectManage.processAdd(params).then((res) => {
          if(res.success) {
            this.$message.success(this.$t('common.base.tip.createSuccess2'));
            this.$refs.CreateFlowModal.closeDialog()
            this.getFlowData()
          } else {
            this.$message.error(res.message || this.$t('common.base.tip.createError2'));
          }
        })
      }
    },
    editRow(item) {
      let params = {
          id: item.id,
          projectTypeId: this.templateId,
        }
      ProjectManage.processDetail(params).then((res) => {
          if (!res.success) return this.$message.error(res.message)
          this.$refs.CreateFlowModal.openDialog(res.data, true)
      })
    },
    deleteRow(item) {
      let params = {
        id: item.id,
        projectTypeId: this.templateId,
      }
      this.$confirm(this.$t('projectManage.setting.deleteTip1'), this.$t('common.base.delete'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      })
      .then(() => {
          ProjectManage.processDelete(params).then((res) => {
            if(res.success) {
              this.getFlowData()
              this.$message.success(this.$t('common.base.tip.deleteSuccess'));
            } else {
              this.$message.error(res.message || this.$t('common.base.tip.deleteFail'));
            }
          })
        })
      .catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@src/modules/setting/projectManage/common/setCommon.scss';
</style>